<template>
  <div class="china-map">
    <div id="china" class="china-echarts"></div>
    <ul class="area-rank">
      <li v-for="(item, index) in seriesData" :key="index">
        <span class="mr-10"> NO.{{ index + 1 }} </span>
        <span class="mr-10">
          {{ item.name }}
        </span>
        <span>
          {{ item.value }}
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent
} from 'echarts/components'
import { MapChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import chinaJson from './china.json'
const chinaColors = ['#2560a8', '#2d87df', '#39a0fe', '#a0dafe', '#c3eafe']

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  CanvasRenderer
])
echarts.registerMap('china', chinaJson)
export default {
  name: 'china',
  data() {
    return {
      myECharts: null,
      seriesData: [
        {
          name: '广东',
          value: 1000
        },
        {
          name: '北京',
          value: 1000
        }
      ]
    }
  },
  mounted() {
    this.initECharts()
    window.addEventListener('resize', this.resizeECharts)
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeECharts)
  },
  methods: {
    initECharts() {
      if (this.myECharts) {
        this.myECharts.dispose()
      }
      // TODO:若是动态数据的--遇到二次渲染时图表不显示加时间戳解决
      const echartsDom = document.getElementById('china')
      this.myECharts = echarts.init(echartsDom)
      const option = {
        title: {
          text: '地区',
          textStyle: {
            fontWeight: 'normal'
          },
          left: 10,
          top: 10
        },
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            let str = params.name
            if (params.value) {
              str += ': ' + params.value
            }
            return str
          }
        },
        geo: {
          map: 'china',
          zoom: 1.2,
          scaleLimit: {
            min: 0.5,
            max: 3
          },
          itemStyle: {
            areaColor: '#c3eafe',
            borderColor: '#ffffff'
          },
          regions: [
            {
              name: '广东',
              label: {
                show: true
              },
              itemStyle: {
                areaColor: chinaColors[0]
              }
            },
            {
              name: '北京',
              label: {
                show: true
              },
              itemStyle: {
                areaColor: chinaColors[1]
              }
            }
          ],
          emphasis: {
            label: {
              show: true
            },
            itemStyle: {
              areaColor: '#39a0fe'
            }
          }
        },
        series: [
          {
            map: 'china',
            type: 'map',
            name: 'data',
            geoIndex: 0,
            data: this.seriesData
          }
        ]
      }
      option && this.myECharts.setOption(option)
    },
    resizeECharts() {
      if (this.myECharts) {
        this.myECharts.resize()
      }
    }
  }
}
</script>
<style lang="scss">
.china-map {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 40px 0 0;
  .china-echarts {
    width: 100%;
    max-width: 638px;
    background-color: #f5f7fa;
    border-radius: 4px 0 0 4px;
    min-height: 368px;
  }
  .area-rank {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 150px;
    height: 368px;
    margin: 0;
    padding: 0 20px 0 0;
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    list-style: none;
    background-color: #f5f7fa;
    li {
      padding: 4px 0;
    }
  }
}
</style>
